<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router"
import { pcaTextArr } from "element-china-area-data";
import request  from '@/api/request'
let router = useRouter();

let emits=defineEmits(["ref-table"])
let shipmentHistory=ref({})
let quotation=ref([])
let User=ref([])


//确认添加
let onSubmit=()=>{
    shipmentHistory.value.shippingDetailsList=shippingDetails.value;
    shipmentHistory.value.shipmentHistoryId="SH-"+new Date().getTime()
        request({
            url:"/ShipmentHistory",
            method:"post",
            data:shipmentHistory.value
        }).then(res=>{
            emits("ref-table")
        })
}

//查询订单
let location=()=>{
    request({
        //查询员工
            url:"/system/user/list",
            method:"post",
            data:{
                current:1,
                size:1000
            }
        }).then(res=>{
            User.value=res.data.records
        })
    request({
        url:"/quotation/where",
        method:"get",
        params:{
            current:1,
            size:100,
            quotationState:"进行中"
    }
    }).then(res=>{
        quotation.value=res.data.records
    })

}

location();


//选择订单查询订单详情，获取发货详情
let shippingDetails=ref([])
let a=(a)=>{
    let he=[];
    //查询订单详情
    request({
        url:"/quoteDetails/select",
        method:"get",
        params:{
            current:1,
            size:100,
        quoteDetailsQuotationId:a
    }
    }).then(res=>{
        shippingDetails.value=res.data.records;
        //查询发货详情
         request({
            url:"/shippingDetails/select",
            method:"post",
            data:shippingDetails.value

        }).then(res=>{
            he=res.data;
            for(let i = 0;i<he.length;i++){
                if(he[i]!=null){
                    shippingDetails.value[i].shippingDetailsToBeShipped=shippingDetails.value[i].quoteDetailsNumberOfSales - he[i].zong;
                }else{
                    shippingDetails.value[i].shippingDetailsToBeShipped=shippingDetails.value[i].quoteDetailsNumberOfSales;
                }
            }
        })
            for(let i = 0;i<shippingDetails.value.length;i++){
                shippingDetails.value[i].shippingDetailsProductsId=shippingDetails.value[i].quoteDetailsProductsId
                shippingDetails.value[i].shippingDetailsQuoteDetailsId=shippingDetails.value[i].quoteDetailsId
                shippingDetails.value[i].shippingDetailsUnit=shippingDetails.value[i].quoteDetailsUnit
                shippingDetails.value[i].shippingDetailsWeight=shippingDetails.value[i].material.materialWeight
                shippingDetails.value[i].shippingDetailsTotalWeight=shippingDetails.value[i].shippingDetailsWeight
                shippingDetails.value[i].shippingDetailsOutboundShipments=0;
            }
    })
}


//计算数量 
let shuliang=()=>{
    let shipmentHistoryOutboundQuantity=null;
    let shipmentHistoryOutboundWeight=null;
    let shipmentHistoryTotal=null
    for(let i = 0;i<shippingDetails.value.length;i++){
        if(shippingDetails.value[i].shippingDetailsOutboundShipments!=null){
            shipmentHistoryOutboundQuantity+=shippingDetails.value[i].shippingDetailsOutboundShipments;
            shipmentHistoryOutboundWeight+=shippingDetails.value[i].shippingDetailsOutboundShipments*shippingDetails.value[i].shippingDetailsWeight;
            shipmentHistoryTotal+=shippingDetails.value[i].shippingDetailsOutboundShipments*shippingDetails.value[i].quoteDetailsActualSellingPrice;

            shippingDetails.value[i].shippingDetailsTotalWeight=shippingDetails.value[i].shippingDetailsWeight*shippingDetails.value[i].shippingDetailsOutboundShipments;
        }
    }
    shipmentHistory.value.shipmentHistoryOutboundQuantity=shipmentHistoryOutboundQuantity;
    shipmentHistory.value.shipmentHistoryOutboundWeight=shipmentHistoryOutboundWeight;
    shipmentHistory.value.shipmentHistoryTotal=shipmentHistoryTotal.toFixed(2);
}

</script>
<template>
    <div>
        <el-card>
            <template #header>
                <el-form :model="shipmentHistory" ref="form" :inline="false" class="card_wrap">
                    <el-form-item label="选择订单："  prop="shipmentHistoryQuotationId" class="c_item">
                            <el-select placeholder="订单号" v-model="shipmentHistory.shipmentHistoryQuotationId" style="width: 150px;" @change="a">
                                <el-option v-for="item in quotation" :label="item.quotationId" :value="item.quotationId">
                                </el-option>
                            </el-select>
                    </el-form-item>
                
                    <el-form-item label="出库总数量：" prop="shipmentHistoryOutboundQuantity" class="c_item">
                            <el-input v-model="shipmentHistory.shipmentHistoryOutboundQuantity" disabled style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="出库总重量：" prop="shipmentHistoryOutboundWeight" class="c_item">
                            <el-input v-model="shipmentHistory.shipmentHistoryOutboundWeight" disabled style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="出库总额：" prop="shipmentHistoryTotal" class="c_item">
                            <el-input v-model="shipmentHistory.shipmentHistoryTotal" disabled style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="确认出库：" prop="shipmentHistoryConfirm" class="c_item">
                            <el-radio-group v-model="shipmentHistory.shipmentHistoryConfirm">
                                <el-radio value="已确认">是</el-radio>
                                <el-radio value="未确认">否</el-radio>
                            </el-radio-group>
                    </el-form-item>
                    <el-form-item label="出库时间：" prop="shipmentHistoryOutboundTime" class="c_item">    
                            <el-date-picker v-model="shipmentHistory.shipmentHistoryOutboundTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期时间">
                            </el-date-picker>
                    </el-form-item>
                    <el-form-item label="预计出库时间：" prop="shipmentHistoryEstimatedOutboundTime" class="c_item">    
                            <el-date-picker v-model="shipmentHistory.shipmentHistoryEstimatedOutboundTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期时间">
                            </el-date-picker>
                    </el-form-item>
                    <el-form-item label="出库员：" prop="shipmentHistoryOutboundClerk" class="c_item">
                            <el-select v-model="shipmentHistory.shipmentHistoryOutboundClerk" style="width: 150px;">
                                <el-option v-for="item in User" :label="item.nickname" :value="item.id">
                                </el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="确认收货：" prop="shipmentHistoryConfirmReceipt" class="c_item">
                            <el-radio-group v-model="shipmentHistory.shipmentHistoryConfirmReceipt ">
                                <el-radio value="已确认">是</el-radio>
                                <el-radio value="未确认">否</el-radio>
                            </el-radio-group>
                    </el-form-item>
                    <el-form-item label="收货时间：" prop="shipmentHistoryReceiptTime" class="c_item">    
                            <el-date-picker v-model="shipmentHistory.shipmentHistoryReceiptTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                    </el-form-item>

                </el-form>
                
                <el-table :data="shippingDetails" border stripe show-overflow-tooltip>
                    <el-table-column prop="shippingDetailsProductsId" label="产品编码" width="100px;"/>
                    <el-table-column prop="material.materialName" label="物料名称" width="100px;"/>
                    <el-table-column prop="material.specificationsAndModels" label="规格型号" width="100px;"/>
                    <el-table-column prop="shippingDetailsToBeShipped" label="待出库数量" width="100px;"/>
                    <el-table-column prop="shippingDetailsQuoteDetailsId" label="订单详情编号" width="110px;"/>
                    <el-table-column prop="shippingDetailsUnit" label="单位" width="110px;"/>
                    <el-table-column prop="shippingDetailsLotNumber" label="批次号" width="180px;">
                        <template #default="scope">
                            <el-input v-model="scope.row.shippingDetailsLotNumber"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="shippingDetailsOutboundShipments" label="本次出库数量" width="180px;" >
                        <template #default="scope">
                            <el-input-number v-model="scope.row.shippingDetailsOutboundShipments" :min="0" :max="scope.row.shippingDetailsToBeShipped" @change="shuliang" @blur="shuliang" :step="1" step-strictly></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="shippingDetailsWeight" label="单个/重量" width="110px;"/>
                    <el-table-column prop="shippingDetailsTotalWeight" label="总/重量" width="110px;"/>
                </el-table>
                
                
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即添加</el-button>
                </el-form-item>
            </template>
        </el-card>
    </div>
</template>
<style scoped>

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
.c_item{
    flex:1;
    margin:0px 5px 15px 0;
    width: calc((100%-0px)/2); 
    min-width:calc((100% - 10px)/2);
    max-width:calc((100% - 10px)/2);
}
</style>